
import React, { Component } from 'react';
import ReactDOM from "react-dom";
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import'./../css/search.css'
class Search extends Component {
    constructor(props) {
        super(props)
        this.change=this.change.bind(this);
        this.bulur=this.bulur.bind(this);
        this.clink=this.clink.bind(this);
        this.data={
            value:'',
            contentShow:'暂无历史记录',
            list:''
        }
        this.state={
            show:false
        };
    }
  
    change(event){
        this.data.value=event.target.value
        console.log(this.data.value)
        // fr/frService/014026
        // getData(this.data.value)
        fetch("/fr/frService/014026",{
            method:"POST",
             body:JSON.stringify({//转成json格式的字符串
                username:this.data.value,  //后台规定的两个参数
            }),
            headers:{   //报头信息
                "content-type":"application/json; charset=utf-8"    //类型是json格式的
            },
            credentials: 'same-origin'
        }).then((response)=>{       //调用成功后执行
            return response.json();
        }).then((data)=>{
            console.log(data);
        })
    }
   
    clink(evt){
        localStorage.removeItem("myCat");
        this.data.contentShow=null;
        console.log('--------', evt.target)
        // evt.target.innerHTML=null;
        this.data.list=null;
        this.setState({
            show:!this.state.show
        })
    }
    bulur(event){
        let saveItems = [];
        if (getItem && getItem != "") {
            saveItems = JSON.parse(getItem);
        }
        saveItems.push(this.data.value);
        localStorage.setItem('myCat', JSON.stringify(saveItems));
        this.data.contentShow = saveItems;
        this.setState({
            show: !this.state.show
        })
        // console.log('-----',this.event.target.value)
        // if(this.data.value){
        //     this.contentList=[];
        //     this.contentList.push(this.data.value)
        //     console.log('push:',this.contentList);
        //     localStorage.setItem('myCat',JSON.stringify(this.contentList));
        //     this.setState({
        //         show:!this.state.show
        //     })
        //     this.data.list='x'
        //     const getItem=localStorage.getItem(JSON.parse('myCat'));
        //     // console.log('-----',getItem)
        //     this.data.contentShow=getItem;
        //     // this.list=''
        // }else{
        //     this.data.contentShow='暂无搜索结果';
        //     this.setState({
        //         show:!this.state.show
        //     })
        // }
    }

    render() {
        // console.log("myCat",getItem)
        // let lis = lists.map()
        if (this.data.value) {
            let getItem = localStorage.getItem('myCat');
            getItem.map((value,index=>{
                return <li>
                    <span>{value}</span>
                    {/* <span onClick={this.clink}> {this.data.list}</span> */}
                </li>
            }))
       }else{
           this.data.contentShow='暂无历史记录！'
       }
        // let $lis
        // if(this.props.list.length==0){
        //     $lis=<div> '暂无历史记录'</div>
        //     // return $lis='暂无历史记录'
        // }else{
        //     $lis=this.props.list.map((key,vlaue)=>{
        //         return  <li className='list-one'>
        //                 <span>{this.data.contentShow}</span>
        //                 <span onClick={this.clink}> {vlaue}</span>
        //             </li>
        //     });
        // }
           
        return <div className='search-box'>
                <div className="search-content">
                    <input onChange={this.change} onBlur={this.bulur} type="search" placeholder='请输入你好查找的内容'/>
                    <button><Link to='/index'>取消</Link></button>
                    <ul className="list-content">
                        <li className='list-one'>
                            <span>{this.data.contentShow}</span>
                            <span onClick={this.clink}> {this.data.list}</span>
                        </li>
                        {/* {$lis} */}
                    </ul>
                </div>
        </div>
    }
}
Search.defaultProps={
    list:[]
}
export default Search;
